<script setup lang="ts">
import {StWatchWidth} from 'st-common-ui-vue3'
import {ref} from 'vue'

/**
 * 组件参数
 */
const {
  responsive ='self',
  simpleResponsiveWidth = 425,
} = defineProps<{
  // 响应式变化策略
  responsive?: 'self' | 'screen';
  // 分页器使用简单分页形式的宽度阈值
  simpleResponsiveWidth?: number;
}>()

// 是否使用简单分页形式
const isSimple = ref(false)

/**
 * 宽度改变时的处理函数
 */
const widthChangeHandler = (width: number) => {
  isSimple.value = width <= simpleResponsiveWidth
}
</script>

<template>
  <StWatchWidth
    class="naive-pagination-responsive w-full h-full"
    :responsive="responsive"
    :widthChangeHandler="widthChangeHandler"
  >
    <slot :isSimple="isSimple"></slot>
  </StWatchWidth>
</template>

<style scoped>

</style>
